<template>
  <article class="announcement-box">
    <el-dialog
      v-model="showDialog"
      title="公告信息"
      width="600"
      draggable
      @close="announcement = ''"
      :modal="false"
    >
      <template #header>
        <div class="my-header">
          <h2>公告信息</h2>
        </div>
      </template>
      <section class="announcement-content">
        <h3 class="content-title">发布公告的区域与物业电话</h3>
        <nav class="operation-bar">
          <el-input v-model.trim="keywords" placeholder="请输入关键词" />
          <el-button :icon="Refresh" @click="keywords = ''"></el-button>
          <el-button @click="handleExport(filteredTableData, '公告区域与物业电话')">
            <i class="iconfont icon-export"></i>
          </el-button>
        </nav>
        <el-table :data="filteredTableData" height="160" empty-text="暂无数据">
          <el-table-column property="name" label="区域名称" align="center" />
          <el-table-column property="tel" label="物业电话" align="center" />
        </el-table>
        <div class="text-area-box">
          <aside class="text-area-title">
            <h3>公告内容</h3>
          </aside>
          <el-input
            class="text-area"
            type="textarea"
            v-model="announcement"
            placeholder="请输入公告信息"
            resize="none"
          ></el-input>
        </div>
      </section>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit"> 发布 </el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </article>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { handleExport, getCurentTime } from '@/utils/toolsFn'
import { ElMessageBox } from 'element-plus'

const showDialog = defineModel('showDialog')
const { tableData } = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
})
const emit = defineEmits(['release'])

const keywords = ref('')
const announcement = ref('')

const filteredTableData = computed(() =>
  tableData.filter((item) => item.name.includes(keywords.value)),
)

const handleSubmit = () => {
  if (announcement.value) emit('release', { content: announcement.value, time: getCurentTime() })
  else {
    ElMessageBox.alert('请输入公告信息')
  }
  showDialog.value = false
}
</script>

<style lang="scss" scoped>
.announcement-box {
  :deep(.el-dialog) {
    .my-header {
      font-size: 1.5rem;
      color: #666;
      font-weight: 600;
    }
    .announcement-content {
      .content-title {
        background-color: #eee;
        padding: 10px;
        color: #999;
        font-size: 1.1rem;
      }
      .operation-bar {
        display: flex;
        justify-content: end;
        padding: 10px;
        .el-input {
          flex-basis: 60%;
          margin-right: 12px;
        }
        .el-button {
          flex: 0 0 auto;
        }
      }
      .text-area-box {
        display: flex;
        margin-top: 0.5rem;
        .text-area-title {
          flex-basis: content;
          h3 {
            margin-left: 0.5rem;
            padding: 0.5rem;
            font-size: 1.15rem;
            font-weight: 600;
            color: #666;
          }
        }
        .text-area {
          flex: 1;
          height: 2.5rem;
          // width: 100%;
        }
      }
    }
  }
}
</style>
